<template>
  <card class="insure-card" :headerStyle="{ padding: '4px 0 20px' }" :showDivider="false">
    <template #title>
      <span>交强险信息</span>
      <a-button
        v-if="carInfo.operateStatus != 40 && carInfo.operateStatus != 50"
        v-permission="'svms:asstes:car:car-model.detail.insureRecord.add'"
        type="primary"
        style="margin-left: 12px"
        @click="onNewInSureClick(0)"
      >
        <template #icon>
          <icon-plus />
        </template>
        新增保单
      </a-button>
    </template>
    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
      <template #policyImgFileId="{ record }">
        <img-link :value="record.policyImgFileId" title="查看附件" file />
      </template>
      <template #insureStatusStr="{ record }">
        <div class="insure-status-text" :class="`insure-status-text-${record.insureStatus}`">{{ record.insureStatusStr }}</div>
      </template>
    </table-index>
  </card>
  <card class="insure-card" :headerStyle="{ padding: '20px 0' }" :showDivider="false">
    <template #title>
      <span>商业险信息</span>
      <a-button
        v-if="carInfo.operateStatus != 40 && carInfo.operateStatus != 50"
        v-permission="'svms:asstes:car:car-model.detail.insureRecord.add'"
        type="primary"
        style="margin-left: 12px"
        @click="onNewInSureClick(1)"
      >
        <template #icon>
          <icon-plus />
        </template>
        新增保单
      </a-button>
    </template>
    <table-index class="insure-card-table insure-card-table-border" :table="tableBusiness" @loadData="loadBusinessData">
      <template #policyImgFileId="{ record }">
        <img-link :value="record.policyImgFileId" title="查看附件" file />
      </template>
      <template #insureStatusStr="{ record }">
        <div class="insure-status-text" :class="`insure-status-text-${record.insureStatus}`">{{ record.insureStatusStr }}</div>
      </template>
      <template #expand-icon="{ expanded }">
        <icon-plus-circle style="font-size: 20px; color: #0256ff" v-if="!expanded" />
        <icon-minus-circle style="font-size: 20px; color: #0256ff" v-else />
      </template>
      <template #expand-row="{ record }">
        <insure-inline-detail :list="record.carInsureDetail" />
      </template>
    </table-index>
  </card>
  <!-- 新增保险 -->
  <insure-add-modal ref="insureAddModalRef" @ok="operateSuccess('add')" />
  <!-- 编辑保险 -->
  <insure-edit-modal ref="insureEditRef" @ok="operateSuccess('edit')" />
  <!-- 退保 -->
  <insure-refund-modal ref="insureRefundRef" @ok="operateSuccess('refund')" />
  <!-- 操作记录 -->
  <operate-log-modal type="6" ref="opreatelogRef" />
</template>
<script setup name="InsureInfo">
  import { ref, watch, onMounted, computed } from 'vue'
  import { useTable } from '@/hooks/table'
  import { carInsuranceFindDetail } from '@/api/asset/carInsure'
  import insureAddModal from '../../components/insure-add-modal.vue'
  import insureEditModal from '../../components/insure-edit-modal.vue'
  import insureRefundModal from '../../components/insure-refund-modal.vue'
  import InsureInlineDetail from './insure-inline-detail.vue'
  import { Modal, Message } from '@arco-design/web-vue'
  import { deleteInsure } from '@/api/asset/carInsure'
  // const emits = defineEmits(['updateCarInfo'])

  const insureAddModalRef = ref()
  const insureEditRef = ref()
  const insureRefundRef = ref()
  const opreatelogRef = ref()
  const props = defineProps({
    carId: String,
    carLicenseNo: String,
    insureId: String,
    disabledOperate: {
      type: Boolean,
      default: false,
    },
    carInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  onMounted(() => {
    watch(
      () => props.carId,
      (newVal) => {
        // 存在 carId
        if (newVal) {
          // 获取交强险信息
          loadCompulsoryData()
          // 获取商业险信息
          loadBusinessData()
        }
      },
      { immediate: true }
    )
  })
  // 操作的保险类型
  const operateInsureType = ref(0)
  const loadData = () => {
    if (operateInsureType.value == 0) {
      // 获取交强险信息
      loadCompulsoryData()
    }
    if (operateInsureType.value == 1) {
      // 获取商业险信息
      loadBusinessData()
    }
  }

  // 新增保单
  const onNewInSureClick = (insureType) => {
    operateInsureType.value = insureType
    const { id, licenseNo, siteId, siteName, compulsoryEndDate, businessEndDate } = props.carInfo
    insureAddModalRef.value.open({ carId: id, licenseNo, siteId, siteName, compulsoryEndDate, businessEndDate }, insureType)
  }

  // 操作成功
  const operateSuccess = (type) => {
    loadData()
    // 新增编辑保险
    if (type == 'add' || type == 'edit') {
      // 更新车辆信息
      // emits('updateCarInfo')
    }
  }

  // 通用 operates
  const operates = computed(() => {
    return props.disabledOperate
      ? undefined
      : [
          {
            label: '编辑',
            permission: 'svms:asstes:car:car-model.detail.insureRecord.edit',
            show: (record) => record.insureStatus != 3,
            method: (record) => {
              operateInsureType.value = record.insureKind
              insureEditRef.value.open(record)
            },
          },
          {
            label: '退保',
            permission: 'svms:asstes:car:car-model.detail.insureRecord.refund',
            show: (record) => record.insureStatus == 1,
            method: (record) => {
              operateInsureType.value = record.insureKind
              insureRefundRef.value.open(record)
            },
          },
          {
            label: '操作记录',
            permission: 'svms:asstes:car:car-model.detail.insureRecord.operaterecords',
            method: (record) => {
              opreatelogRef.value.open(record.id)
            },
          },
          {
            label: '删除',
            permission: 'svms:asstes:car:car-model.detail.insureRecord.delete',
            method: (record) => {
              Modal.confirm({
                title: '提示',
                cancelText: '取消',
                okText: '确认',
                content: '删除后会同步删除保险费用，是否删除此条保险记录？',
                onBeforeOk: async () => {
                  operateInsureType.value = record.insureKind
                  await deleteInsure({ id: record.id })
                  Message.success('已删除')
                  loadData()
                  return true
                },
              })
            },
          },
        ]
  })
  // 交强险 start
  // 交强险列表调用
  const loadCompulsoryData = () => {
    const param = {
      id: props.insureId,
      pageNumber: 1,
      pageSize: 1000,
      insureKind: 0, // 交强险
      carId: props.carId,
      licenseNo: props.carLicenseNo,
    }
    tableCompulsory.tableLoading = true
    carInsuranceFindDetail(param)
      .then((res) => {
        const result = res.result
        const data = result.data
        console.log('data', data)
        tableCompulsory.dataList = data
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    rowClass: (record) => {
      let classList = []
      let rawId = record.id
      if (props.insureId && rawId == props.insureId) {
        classList.push('insure-current')
      }
      return classList.join(' ')
    },
    columns: [
      { title: '有效期', dataIndex: 'insureDate', fixed: 'left', width: 200 },
      { title: '保单附件', dataIndex: 'policyImgFileId', width: 100, slotName: 'policyImgFileId' },
      { title: '保单关联门店', dataIndex: 'siteName', width: 150 },
      { title: '保险公司', dataIndex: 'insureCompanyStr' },
      { title: '保险费', dataIndex: 'insureAmt', unit: '元' },
      { title: '保单状态', dataIndex: 'insureStatusStr', slotName: 'insureStatusStr', width: 90 },
      { title: '退保日期', dataIndex: 'backDate', width: 110 },
      { title: '退保金额', dataIndex: 'backAmount', unit: '元', width: 110 },
      { title: '被保险人', dataIndex: 'insuredPorsen', width: 100 },
      { title: '被保险人证件号', dataIndex: 'insuredPorsenCard', width: 180 },
      { title: '实际保单号', dataIndex: 'insureNo', width: 150 },
      { title: '系统保单号', dataIndex: 'insureCode', width: 150 },
    ],
    operates: operates.value,
  })
  // 交强险 end

  // 商业险 start
  const loadBusinessData = () => {
    const param = {
      id: props.insureId,
      insureKind: 1, // 交强险
      carId: props.carId,
      licenseNo: props.carLicenseNo,
      pageNumber: tableBusiness.pagination.page || 1,
      pageSize: tableBusiness.pagination.pageSize,
    }
    tableBusiness.tableLoading = true
    carInsuranceFindDetail(param)
      .then((res) => {
        const result = res.result
        tableBusiness.dataList = result.data
        tableBusiness.pagination.pageCount = result.total
      })
      .finally(() => {
        tableBusiness.tableLoading = false
      })
  }

  // table 配置
  const tableBusiness = useTable({
    pagination: {
      page: 1,
      pageSize: 5,
      showSizePicker: false,
      pageCount: 1,
    },
    expandable: {
      title: ' ',
      width: 50,
    },
    bordered: {
      wrapper: true,
      cell: true,
    },
    rowClass: (record) => {
      let classList = []
      let rawId = record.id
      if (props.insureId && rawId == props.insureId) {
        classList.push('insure-current')
      }
      return classList.join(' ')
    },
    columns: [
      { title: '有效期', dataIndex: 'insureDate', fixed: 'left', width: 210 },
      { title: '保单附件', dataIndex: 'policyImgFileId', width: 100, slotName: 'policyImgFileId' },
      { title: '保单关联门店', dataIndex: 'siteName', width: 150 },
      { title: '保险公司', dataIndex: 'insureCompanyStr' },
      { title: '总保额', unit: '万元', dataIndex: 'insuredSum' },
      { title: '总保险费', unit: '元', dataIndex: 'insureAmt' },
      { title: '保单状态', dataIndex: 'insureStatusStr', slotName: 'insureStatusStr', width: 90 },
      { title: '退保日期', dataIndex: 'backDate', width: 110 },
      { title: '退保金额', dataIndex: 'backAmount', unit: '元', width: 110 },
      { title: '被保险人', dataIndex: 'insuredPorsen', width: 100 },
      { title: '被保险人证件号', dataIndex: 'insuredPorsenCard', width: 180 },
      { title: '实际保单号', dataIndex: 'insureNo', width: 150 },
      { title: '系统保单号', dataIndex: 'insureCode', width: 150 },
    ],
    operates: operates.value,
  })
  // 商业险 end
</script>
<style lang="less" scoped>
  .insure-card {
    .insure-card-table {
      :deep {
        .odd-tr {
          > td {
            background-color: #e5e6eb;
          }
        }
        .insure-current {
          td {
            background-color: #e7eeff;
          }
          &:hover {
            > td {
              background-color: #e7eeff !important;
            }
            .arco-table-td.arco-table-col-fixed-right::before,
            .arco-table-td.arco-table-col-fixed-left::before {
              background-color: #e7eeff !important;
            }
          }
        }
        .arco-table-tr-expand {
          > .arco-table-td > .arco-table-cell {
            padding: 30px 221px;
          }
          > .arco-table-td {
            background-color: #e5e6eb !important;
          }
        }
        .arco-table-expand-btn {
          width: 20px;
          height: 20px;
          background-color: inherit;
        }
      }
    }
    .insure-card-table-border {
      :deep {
        .arco-table-border .arco-table-tr .arco-table-th {
          border-bottom: none;
        }
      }
    }
  }
  .insure-status-text {
    font-size: 14px;
  }
  .insure-status-text-0 {
    color: #ff7d00;
  }
  .insure-status-text-1 {
    color: #00b42a;
  }
  .insure-status-text-2 {
    color: #8491a8;
  }
  .insure-status-text-3 {
    color: #722ed1;
  }
</style>
